<template>
  <div class="city">
    <van-index-bar :index-list="indexList" highlight-color="#d8d8d8">
      <!-- 定位 -->
        <van-index-anchor :key="indexList[0]" :index="indexList[0]"/>
        <city-list :cityList="locationCity"></city-list>
      <!-- 最近 -->
        <van-index-anchor :key="indexList[1]" :index="indexList[1]"/>
        <city-list :cityList="historyCity"></city-list>
      <!-- 热门 -->
        <van-index-anchor :key="indexList[2]" :index="indexList[2]"/>
        <city-list :cityList="hotData"></city-list>
      <!-- 所有城市 -->
        <div v-for="(items, index) in cityData" :key="index" class="city-list">
          <van-index-anchor :index="index" />
          <router-link to="/">
            <van-cell  v-for="item in items" :key="item.id" :title="item.nm" @click="citydata(item)" ></van-cell>
          </router-link>
        </div>
    </van-index-bar>
    

    
  </div>  
</template>

<script>
import CityList from '../components/CityList.vue';

import cities from '../assets/json/cities.json'
import hotcity from '../assets/json/hotcity.json'


import { mapMutations, mapState } from 'vuex';

export default {
  data(){
    return{
      cityData:cities,
      hotData:hotcity.hot,
      locationCity:["定位失败，请稍后重试"],
      indexList: [
           "定位",
           "最近",
           "热门",
           "A",
           "B",
           "C",
           "D",
           "E",
           "F",
           "G",
           "H",
           "I",
           "J",
           "K",
           "L",
           "M",
           "N",
           "O",
           "P",
           "Q",
           "R",
           "S",
           "T",
           "U",
           "V",
           "W",
           "X",
           "Y",
           "Z",
      ],
    }
  },
  components: { 
      CityList 
  },
  methods:{
    citydata(data){
      this.city(data)
    },
    ...mapMutations(["city"]),
    
  },
  computed:{
    ...mapState(["historyCity"])
  }
};
</script>

<style lang="less" scoped>
.city {
  // margin-bottom: 48px;
  
}
.city-list{
  // padding-right: 0.6rem;
}
/deep/ .van-cell::after{
  border-bottom: 0.02rem solid #c8c7cc;
}
</style>